{% extends 'base.html' %}
{% load static from staticfiles %}


{% block css_content %}
    <link rel="stylesheet" type="text/css" media="all" href="{% static "daterangepicker/daterangepicker-bs3.css" %}"/>
    <link href="{% static "css/tree.css" %}" rel="stylesheet"/>
{% endblock %}

{% block page_content %}



    <div class="widget-box">
        <div class="widget-header">
            <h5 class="widget-title">service列表</h5>

            <!-- #section:custom/widget-box.toolbar -->
            {% if perms.manage.admin_task %}
            <div class="widget-toolbar no-border">
                <button id="addServiceBtn" class="btn btn-xs btn-success bigger">
                    <i class="ace-icon fa fa-arrow-left"></i>
                    新建service
                </button>
            </div>
            {% endif %}
            <!-- /section:custom/widget-box.toolbar -->
        </div>

        <div class="widget-body">
            <div class="widget-main">
                <table id="service-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>服务名</th>
                            <th>servers列表</th>
                            <th>clients列表</th>
                            <th>
                                操作
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>



    <div class="modal fade" id="addService" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">新建service</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        服务名=命名空间+$+服务简称，服务名有用户自行定义，务必按照规范定义。
                        备注：服务名需要保证唯一性，命名空间可以参考java中的包名规范，防止命名冲突。
                    </div>
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">service:</label>
                            <input type="text" class="form-control" id="service">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="create_service" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js_content %}
    <script src="{% static "daterangepicker/moment.js" %}" type="text/javascript"></script>
    <script src="{% static "daterangepicker/daterangepicker.js" %}" type="text/javascript"></script>
    <script type="text/javascript" src="{% static "layer/layer.js" %}"></script>
    <script type="text/javascript" src="{% static "highchart/highcharts.js" %}"></script>
    <script type="text/javascript" src="{% static "highchart/modules/exporting.js" %}"></script>
    <script src="{% static "javascripts/jquery.dataTables.min.js" %}" type="text/javascript"></script>
	<script src="{% static "js/jquery.dataTables.bootstrap.js"%}"></script>
    <script type="text/javascript">

        var serviceTable = $("#service-table").DataTable({
            "sPaginationType": "full_numbers",
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        if(data.length>0) {
                            if (data.length > 50) {
                                return data.substring(0, 50) + "...(共" + data.split(",").length + "个)";
                            } else {
                                return data + "(共" + data.split(",").length + "个)";
                            }
                        }else{
                            return ""
                        }
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        if(data.length>0) {
                            if (data.length > 50) {
                                return data.substring(0, 50) + "...(共" + data.split(",").length + "个)";
                            } else {
                                return data + "(共" + data.split(",").length + "个)";
                            }
                        }else{
                            return ""
                        }
                    },
                    "targets": 2
                },
                {
                    "render": function (data, type, row) {
                        if (data == true) {
                            return '<div class="hidden-sm hidden-xs action-buttons">' +
                                    '<a class="blue" href="{% url "manage.views.child" %}?service='+row[0]+'" target="view_window" style="cursor:pointer;" ><i class="icon-eye-open"></i>查看</a>' +
                                    {% if perms.manage.admin_task %}
                                    '<a class="red" onclick="delete_service(\'' + row[0] + '\')" style="cursor:pointer;" ><i class="icon-trash"></i>删除</a>' +
                                    {% endif %}
                                    '</div>';
                        } else {
                            return '<div class="hidden-sm hidden-xs action-buttons"><a class="blue" href="{% url "manage.views.child" %}?service='+row[0]+'" target="view_window" style="cursor:pointer;" ><i class="icon-eye-open"></i>查看</a></div>';
                        }
                    },
                    "targets": 3
                },
            ],
            "columns": [
                {
                    "sWidth": "30%"
                },
                {"sWidth": "30%"},
                {"sWidth": "30%"},
                {"sWidth": "10%"},
            ],
            "language": {
                url: "{% static 'datatable/Chinese.json' %}"
            },
            "ajax": {
                url: "{% url 'manage.views.ajax_service' %}",
                type: "POST"
            }
        });

        $("#addServiceBtn").click(function () {
            $("#service").val("");
            $('#service').removeAttr("readonly");
            $("#servers").val("");
            $('#addService').modal('show');
        });

        $("#create_service").click(function () {
            var index = layer.load(1, {
                shade: [0.1, '#fff']
            });

            var url = "";

            if ($("#service").attr("readonly")=="readonly"){
                url = '{% url 'manage.views.ajax_update_server' %}'
            }else{
                url = '{% url 'manage.views.ajax_create_service' %}'
            }

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    'service': $("#service").val()
                },
                success: function (data) {
                    if (data['rc'] == 0) {
                        $('#addService').modal('hide')
                        layer.msg(data['msg'], {icon: 1});
                        serviceTable.ajax.reload()
                    } else {
                        layer.msg(data['msg'], {icon: 2});

                    }
                    layer.close(index);
                },
                error: function () {
                    layer.msg('服务器内部异常', {icon: 2});
                    layer.close(index);
                }
            });
        });

        function edit_service(service, servers) {
            $("#service").val(service);
            $("#service").attr("readonly", "readonly");
            $('#addService').modal('show');
        }


        function delete_service(service){
            layer.confirm('是否删除'+service+'节点？', {
                btn: ['删除','取消'],
                shade: false
            }, function(){
                var index = layer.load(1, {
                    shade: [0.1,'#fff']
                });
                $.ajax({
                url:'{% url 'manage.views.ajax_delete' %}',
                data:{
                    'service':service
                },
                method:'POST',
                success:function(data){
                    if(data['rc']==0){
                        serviceTable.ajax.reload()
                        layer.msg(data['msg'], {icon: 1});
                    }else{
                        layer.msg(data['msg'], {icon: 2});
                        layer.close(index);
                    }
                    layer.close(index);
                },
                error:function(){
                    layer.msg('服务器内部异常', {icon: 2});
                    layer.close(index);
                }
            })
            }, function(){
            });
        }

    </script>
{% endblock %}